<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高新一小学生管理系统</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="datepicker/skin/WdatePicker.css">
    <style>
        .student{
            position: relative;
        }
        .addStudent{
            position: absolute;
            right:30px;
        }
        .cover{
            position: fixed;
            top:0;
            left:0;
            background: rgba(0, 0, 0,0.3);
            width: 100%;
            height: 100%;
            display:none;
        }
        .edit-Box{
            width: 600px;
            padding: 30px;
            background-color: white;
            position: fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            display: none;
        }
        #main{
            position: absolute;
            top: 80px;
            left: 360px;
            display: none;
        }
        .greet{
            position:absolute;
            left:30px;
        }
        table{
            text-align: center;
            table-layout: fixed;
            margin-top: 30px;
        }
        td{
            cursor: pointer;
        }
        th{
            text-align: center;
            table-layout: fixed;
        }
        caption{
            text-align: center;
            font-size: 20px;
        }
        #model{
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <script>
        if(!sessionStorage.getItem("userinfo")){
            location.href = "http://127.0.0.1:8800/login.html";
        }
    </script>
</head>
<body>
    <div class="student">
        <button class="btn btn-primary addStudent">+添加学生</button>
        <div class="cover"></div>
        <!-- 添加学生的弹出框 -->
        <div class="edit-Box">
            <h4>添加学生</h4>
            <div class="form-horizontal">
                <!-- 姓名的输入框的设置 -->
                <div class="form-group">
                    <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                    </div>
                </div>
                <!-- 年龄的输入框的设置 -->
                <div class="form-group">
                    <label for="data-age" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" id="data-age" placeholder="年龄">
                    </div>
                </div>
                <!-- 性别的输入框的设置 -->
                <div class="form-group">
                    <label for="data-age" class="col-sm-2 control-label">性别</label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" id="data-male" checked>男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" id="data-female">女
                    </label>
                </div>
                <!-- 城市的输入框的设置   三级联动 -->
                
                <div class="form-group">
                    <label class="col-sm-2 control-label">所在城市</label>
                    <select name="" id="province"></select>
                    <select name="" id="city"></select>
                    <select name="" id="area"></select>
                </div>
                
                <!-- 入学日期的输入框的设置 -->
                <div class="form-group">
                    <label class="col-sm-2 control-label">入学日期</label>
                    <div class="col-sm-10">
                        <input type="input" onclick=WdatePicker() class="form-control" id="data-joinDate" placeholder="入学日期">
                    </div>
                </div>
                 <!-- 确认或则取消的输入框的设置 -->
                <div class="form-group" style="transform: translateX(200px);">
                    <button id="submit" class="btn btn-primary">确认添加</button>
                    <button id="cancel" class="btn btn-default">取消</button>
                </div>
            </div>  
        </div>
        <!-- 成绩表 -->
        <div id="main" style="width: 300px;height:400px;background-color: rgba(235, 207, 194, 0.5);"></div>
        <div class="greet">
            <button class="btn btn-primary exit">退出登录</button>
            <span class="greet-words"></span>   
        </div>
        <table class="table">
            <caption>高新一小学生管理系统</caption>
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr id="model">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-address">
                        <span class="data-province"></span>
                        <span class="data-city"></span>
                        <span class="data-area"></span>
                    </td>
                    <td class="data-joinTime"></td>
                    <td>
                        <button class="btn btn-primary edit">编辑</button>
                        <button class="btn btn-danger delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="citys.js"></script>
    <script src="datepicker/WdatePicker.js"></script>
    <script>
        console.log(citys)
        //获取省份城市地区三级联动的信息，对这个数组进行处理
        let province = $("#province")
        let city = $("#city")
        let area = $("#area") 

        citys.forEach(item=>{
            let  option = $(`<option>${item.provinceName}</option>`);
            province.append(option);
        })
        citys[0].mallCityList.forEach(item=>{
            let  option = $(`<option>${item.cityName}</option>`);
            city.append(option);
        })
        citys[0].mallCityList[0].mallAreaList.forEach(item=>{
            let  option = $(`<option>${item.areaName}</option>`);
            area.append(option);
        })
        //切换省份后对应城市和地区变化的函数
        function updataCity(){
            //返回当前选中的项目其对应下的下标
            city.html("");
            //获得省份对应的城市列表,设为全局变量，在切换地区时可以调用
            cityList = citys[this.selectedIndex].mallCityList;
            cityList.forEach(item=>{
                let  option = $(`<option>${item.cityName}</option>`);
                city.append(option);
            })
        }
        province.change(function(){
            updataCity.call(this);
            updataArea.call(city[0]);
        })

        //切换城市后对应地区变化的函数
        function updataArea(){
            //返回当前选中的项目其对应下的下标
            area.html("");
            //获得省份对应的城市列表
            areaList = cityList[this.selectedIndex].mallAreaList;
            areaList.forEach(item=>{
                let  option = $(`<option>${item.areaName}</option>`);
                area.append(option);
            })
        }
        city.change(function(){
            updataArea.call(this);   
        })
        
        // 设置欢迎的角色的语句
        let message = JSON.parse(sessionStorage.getItem("userinfo"))[0];
        console.log(message)
        //console.log(Number(message.type))
        $(".greet-words").html(`${message.name}${Number(message.type)?"老师":"同学"},你好！`)

        //点击退出摁扭的事件
        $(".exit").click(function(){
            document.cookie = `${message.username} = 0;expires=` + new Date("1970-01-01");
            sessionStorage.removeItem("userinfo");
            location.href = "http://127.0.0.1:8800/login.html";    
        })
        //let s = JSON.parse(sessionStorage.getItem("userinfo"))
        //console.log(s)
        
        
        //进入页面时获取数据库的数据
        $.ajax({
            url:"http://127.0.0.1:8800/getstudents",
            success(data){
                console.log(data)
                data.forEach(element => {
                    newItem = $("#model").clone(true);
                    newItem.attr("id","");
                    newItem.find(".data-id").html(element.id);
                    newItem.find(".data-name").html(element.name);
                    newItem.find(".data-age").html(element.age);
                    newItem.find(".data-sex").html(element.sex?"男":"女");
                    newItem.find(".data-province").html(element.province);
                    newItem.find(".data-city").html(element.city);
                    newItem.find(".data-area").html(element.area);
                    newItem.find(".data-joinTime").html(element.joindate);
                    $("tbody").append(newItem);
                });
            }
        })



        //删除学生的操作
        $(".delete").click(function(){
           let item = $(this).closest("tr");
            if(confirm(`真删除${$(this).closest("tr").find(".data-name").html()}啊?亲😊`)){
               $.ajax({
                   url:"http://127.0.0.1:8800/delect",
                   data:{
                       id:item.find(".data-id").html(),
                   },
                   success(data){
                       item.fadeOut();
                   }
               })
            }
        })


        //添加学生的操作
        $(".addStudent").click(function(){
            $(".cover").fadeIn();
            $(".edit-Box").fadeIn();
            $("#data-name").focus(); 
        })
        $("#cancel").click(function(){
            $(".cover").fadeOut("fast");
            $(".edit-Box").fadeOut("fast");
            $("#data-name").val("");
            $("#data-age").val("");
        })
        $("#submit").click(function(){
            if($("#submit").html() === "确认修改"){
                return;
            }
            $(".cover").fadeOut("fast");
            $(".edit-Box").fadeOut("fast");
            if(!$("#data-name").val() || !$("#data-age").val() || !$("#data-joinDate").val()){
                $("#data-name").val("");
                $("#data-age").val("");
                $("#data-joinDate").val("");
                return;
            }
            if($("#data-name").val()  && $("#data-age").val() && $("#data-joinDate").val()){
                    $.ajax({
                    url:"http://127.0.0.1:8800/add",
                    data:{
                        name:$("#data-name").val(),
                        age:$("#data-age").val(),
                        sex:$("#data-female")[0].checked ? 0 : 1,
                        province:$("#province").val(),
                        city:$("#city").val(),
                        area:$("#area").val(),
                        joindate:$("#data-joinDate").val(),
                    },
                    success(data){
                        if(data === "success"){
                            console.log(data)
                            history.go(0);
                        }
                        else{
                            alert("添加失败")
                        }
                    }
                })
            }
        })
     
        //提高用户体验感
        document.onkeydown = function(event){
            if(event.keyCode === 13){
                $("#submit").click();
            }
            if(event.keyCode === 27){
                $("#cancel").click();
            }
        }

        //编辑学生的操作
        $(".edit").click(function(){
            let item = $(this).closest("tr");
            $("#submit").html("确认修改");
            $(".cover").fadeIn();
            $(".edit-Box").fadeIn();
            $("#data-name").focus();
            $("#data-name").val($(this).closest("tr").find(".data-name").html());
            $("#data-age").val($(this).closest("tr").find(".data-age").html());
            if($(this).closest("tr").find(".data-sex").html() === "女"){
                $("#data-female")[0].checked = 1;
            }
            else{
                $("#data-male")[0].checked = 1;
            }
            //编辑时省市区的还原   未实现
            //let provinceName = $(this).closest("tr").find(".data-province").html();
            //console.log($("#province").find("option"))
            //编辑时省份的还原
            // let provinceList = document.querySelectorAll("#province option");
            // for(let i = 0;i < provinceList.length;i++){
            //     if(provinceName === provinceList[i].value){
            //         provinceList[i].selected = true;
            //          province.change(function(){
            //             updataCity.call(provinceList[i]);
            //             updataArea.call(city[0]);
            //         }) 
            //     }
            // }
            
            //编辑时市的未还原
            // let cityName = $(this).closest("tr").find(".data-city").html();
            // console.log(cityName)
            // console.log($("#city").find("option"))
            // let cityList = document.querySelectorAll("#city option");
            // for(let i = 0;i < cityList.length;i++){
            //     if(cityName === cityList[i].value){
            //         console.log(cityList[i].value)
            //         console.log(cityList[i].selected)
            //         cityList[i].selected = true;
            //     }
            // }
            $("#data-joinDate").val($(this).closest("tr").find(".data-joinTime").html());
            $("#cancel").click(function(){
                $(".cover").hide();
                $(".edit-Box").hide();
                $("#data-name").val("");
                $("#data-age").val("");
                $("#submit").html("确认添加");
            })
            $("#submit").click(function(){
                if($("#submit").html() === "确认添加"){
                    return;
                }
                $(".cover").fadeOut("fast");
                $(".edit-Box").fadeOut("fast");
                if($("#data-name").val() && $("#data-age").val() && $("#data-joinDate").val()){
                    $.ajax({
                        url:"http://127.0.0.1:8800/updata",
                        data:{
                            id:item.find(".data-id").html(),
                            name:$("#data-name").val(),
                            age:$("#data-age").val(),
                            sex:$("#data-female")[0].checked ? 0 : 1,
                            province:$("#province").val(),
                            city:$("#city").val(),
                            area:$("#area").val(),
                            joindate:$("#data-joinDate").val(),
                        },
                        success(data){
                            if(data === "success"){
                                console.log(1)
                                history.go(0);
                            }
                            else{
                                alert("修改失败")
                            }
                        }
                    })
                }
            })
        })
    
      //点击名字时查看成绩和鼠标移开事件
        $(".data-name").click(function(){ 
          let stuId = $(this).closest("tr").find(".data-id").html();
          console.log(stuId);
          $.ajax({
                url:"http://127.0.0.1:8800/gainScore",
                data:{
                    stuId:stuId,   
                },
                success(data){
                    console.log(data);
                    if(data === "0"){
                        alert("这位同学的成绩还未录入");
                        return;
                    }
                    else{
                        $("#main").fadeIn();
                        let scoreFrom = data;
                         // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        var option = {
                            title: {
                                text: `${scoreFrom[0].name}的成绩单`,
                            },
                            tooltip: {},
                            legend: {
                                data:['分数']
                            },
                            xAxis: {
                                data: [`${scoreFrom[0].subject}`,`${scoreFrom[1].subject}`,`${scoreFrom[2].subject}`]
                            },
                            yAxis: {
                            },
                            series: [{
                                name: '分数',
                                type: 'bar',
                                data: [`${scoreFrom[0].score}`, `${scoreFrom[1].score}`,`${scoreFrom[2].score}`]
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    } 
                }
            })
        })
        $(".data-name").mouseleave(function(){
            $("#main").fadeOut();
        })
      
    </script>
</body>
</html>